<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>借用记录 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9',
                        secondary: '#B983FF',
                        accent: '#FFC2E2',
                        light: '#FFF9FC',
                        dark: '#5D4037'
                    },
                    boxShadow: {
                        'custom': '0 4px 15px rgba(255, 126, 185, 0.15)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #FF7EB9 0%, #B983FF 100%);
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(255, 126, 185, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="gradient-bg text-white shadow-md">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('home.html')" class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-medium">借用记录</h1>
                <button class="p-2 bg-white/20 rounded-full hover:bg-white/30 transition-colors" id="addBorrowBtn">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        
        <!-- 标签页导航 -->
        <div class="bg-white">
            <div class="flex px-4 pt-3 pb-1">
                <button class="flex-1 py-2.5 text-center text-sm font-medium text-primary gradient-bg bg-clip-text" id="currentTab">
                    <div class="relative">
                        当前借用
                        <div class="absolute bottom-0 left-1/4 right-1/4 h-1 bg-primary rounded-full"></div>
                    </div>
                </button>
                <button class="flex-1 py-2.5 text-center text-sm font-medium text-gray-500" id="historyTab">历史记录</button>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto">
            <!-- 当前借用列表 -->
            <div id="currentBorrowList" class="p-4 bg-gray-50">
                <div class="space-y-3">
                    <!-- 借用记录1 -->
                    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1583328620798-5a40a1ae370c?q=80&w=100&auto=format&fit=crop" alt="电动螺丝刀" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电动螺丝刀</h3>
                                    <p class="text-xs text-gray-500">借给：张先生</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 text-xs font-medium bg-red-50 text-red-600 rounded-full">未归还</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>借出日期：2023-07-15</span>
                                <span class="text-red-600 font-medium">逾期3天</span>
                            </div>
                            <div class="flex justify-between">
                                <span>预计归还：2023-07-20</span>
                                <span>已借：8天</span>
                            </div>
                        </div>
                        <div class="flex border-t border-gray-100">
                            <button class="flex-1 p-2.5 text-center text-sm text-green-600 hover:bg-green-50 transition-colors">
                                <i class="fa fa-check mr-1"></i>确认归还
                            </button>
                            <button class="flex-1 p-2.5 text-center text-sm text-primary hover:bg-primary/5 transition-colors">
                                <i class="fa fa-comment mr-1"></i>发送提醒
                            </button>
                        </div>
                    </div>
                    
                    <!-- 借用记录2 -->
                    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1610736188089-3483a7cc71e5?q=80&w=100&auto=format&fit=crop" alt="电锯" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电锯</h3>
                                    <p class="text-xs text-gray-500">借给：李女士</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 text-xs font-medium bg-amber-50 text-amber-600 rounded-full">即将到期</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>借出日期：2023-07-18</span>
                                <span class="font-medium">剩余2天</span>
                            </div>
                            <div class="flex justify-between">
                                <span>预计归还：2023-07-25</span>
                                <span>已借：5天</span>
                            </div>
                        </div>
                        <div class="flex border-t border-gray-100">
                            <button class="flex-1 p-2 text-center text-sm text-green-600 hover:bg-green-50 transition-colors">
                                <i class="fa fa-check mr-1"></i>确认归还
                            </button>
                            <button class="flex-1 p-2 text-center text-sm text-blue-600 hover:bg-blue-50 transition-colors">
                                <i class="fa fa-comment mr-1"></i>发送提醒
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 历史记录列表 (默认隐藏) -->
            <div id="historyBorrowList" class="p-4 bg-gray-50 hidden">
                <div class="flex justify-between items-center mb-3">
                    <h2 class="text-sm font-medium">历史借用记录</h2>
                    <select class="text-sm border-none bg-white/80 px-3 py-1.5 rounded-full text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary/20">
                        <option>全部</option>
                        <option>本月</option>
                        <option>上月</option>
                        <option>近三个月</option>
                        <option>今年</option>
                    </select>
                </div>
                
                <div class="space-y-3">
                    <!-- 历史记录1 -->
                    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1611930388690-2001a00c7a7f?q=80&w=100&auto=format&fit=crop" alt="电钻" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">电钻</h3>
                                    <p class="text-xs text-gray-500">借给：王先生</p>
                                </div>
                            </div>
                            <span class="px-3 py-1 text-xs font-medium bg-green-50 text-green-600 rounded-full">已归还</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>借出日期：2023-06-10</span>
                                <span>归还日期：2023-06-15</span>
                            </div>
                            <div class="flex justify-between">
                                <span>借用时长：5天</span>
                                <span>状态：按时归还</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史记录2 -->
                    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1607194429575-37ef6b2328b5?q=80&w=100&auto=format&fit=crop" alt="扳手" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">扳手套装</h3>
                                    <p class="text-xs text-gray-500">借给：赵女士</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已归还</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>借出日期：2023-06-20</span>
                                <span>归还日期：2023-07-02</span>
                            </div>
                            <div class="flex justify-between">
                                <span>借用时长：12天</span>
                                <span>状态：逾期2天</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 历史记录3 -->
                    <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                        <div class="flex items-center justify-between p-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1604199055896-462a9e9b5959?q=80&w=100&auto=format&fit=crop" alt="园艺剪" class="w-12 h-12 rounded-lg object-cover mr-3">
                                <div>
                                    <h3 class="font-medium">园艺剪</h3>
                                    <p class="text-xs text-gray-500">借给：刘先生</p>
                                </div>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已归还</span>
                        </div>
                        <div class="px-4 pb-3 text-sm text-gray-500">
                            <div class="flex justify-between mb-1">
                                <span>借出日期：2023-07-01</span>
                                <span>归还日期：2023-07-03</span>
                            </div>
                            <div class="flex justify-between">
                                <span>借用时长：2天</span>
                                <span>状态：按时归还</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加借用记录的模态框 -->
    <div id="addBorrowModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl w-5/6 max-w-sm p-5 card-shadow transform transition-all duration-200 scale-95 opacity-0">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium">添加借用记录</h3>
                <button id="closeModalBtn" class="text-gray-500">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <form id="addBorrowForm">
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">选择工具</label>
                    <select class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                        <option value="">请选择工具</option>
                        <option value="1">电钻</option>
                        <option value="2">螺丝刀套装</option>
                        <option value="3">扳手</option>
                        <option value="4">园艺修剪机</option>
                        <option value="5">激光测距仪</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">借用人</label>
                    <input type="text" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="输入借用人姓名">
                </div>
                <div class="grid grid-cols-2 gap-3 mb-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">借出日期</label>
                        <input type="date" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">预计归还</label>
                        <input type="date" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">备注（可选）</label>
                    <textarea class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all" placeholder="输入备注信息" rows="2"></textarea>
                </div>
                <div class="flex space-x-2">
                    <button type="button" id="cancelAddBtn" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-gray-700 hover:bg-gray-50 transition-colors">取消</button>
                    <button type="submit" class="flex-1 px-4 py-2.5 gradient-bg text-white rounded-xl hover:opacity-90 transition-opacity">保存</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // 页面加载完成后的处理
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化标签页切换
            initTabs();
            
            // 初始化模态框功能
            initModal();
            
            // 为确认归还按钮添加事件监听
            document.querySelectorAll('button:has(.fa-check)').forEach(button => {
                button.addEventListener('click', function() {
                    const toolName = this.closest('.bg-white').querySelector('h3').textContent;
                    if (confirm(`确认归还工具：${toolName}？`)) {
                        alert(`已确认归还：${toolName}`);
                        // 这里可以添加实际的归还逻辑
                    }
                });
            });
            
            // 为发送提醒按钮添加事件监听
            document.querySelectorAll('button:has(.fa-comment)').forEach(button => {
                button.addEventListener('click', function() {
                    const toolName = this.closest('.bg-white').querySelector('h3').textContent;
                    const borrowerName = this.closest('.bg-white').querySelector('.text-gray-500').textContent.replace('借给：', '');
                    alert(`已发送提醒给：${borrowerName}，请归还工具：${toolName}`);
                });
            });
        });
        
        // 初始化标签页切换功能
        function initTabs() {
            const currentTab = document.getElementById('currentTab');
            const historyTab = document.getElementById('historyTab');
            const currentList = document.getElementById('currentBorrowList');
            const historyList = document.getElementById('historyBorrowList');
            
            currentTab.addEventListener('click', function() {
                // 激活当前借用标签
                currentTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                currentTab.classList.remove('text-gray-500');
                // 禁用历史记录标签
                historyTab.classList.add('text-gray-500');
                historyTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                // 显示当前借用列表
                currentList.classList.remove('hidden');
                historyList.classList.add('hidden');
            });
            
            historyTab.addEventListener('click', function() {
                // 激活历史记录标签
                historyTab.classList.add('text-primary', 'border-b-2', 'border-primary');
                historyTab.classList.remove('text-gray-500');
                // 禁用当前借用标签
                currentTab.classList.add('text-gray-500');
                currentTab.classList.remove('text-primary', 'border-b-2', 'border-primary');
                // 显示历史记录列表
                historyList.classList.remove('hidden');
                currentList.classList.add('hidden');
            });
        }
        
        // 初始化模态框功能
        function initModal() {
            const modal = document.getElementById('addBorrowModal');
            const addBtn = document.getElementById('addBorrowBtn');
            const closeBtn = document.getElementById('closeModalBtn');
            const cancelBtn = document.getElementById('cancelAddBtn');
            const form = document.getElementById('addBorrowForm');
            
            // 打开模态框
            addBtn.addEventListener('click', function() {
                modal.classList.remove('hidden');
                // 添加淡入动画
                setTimeout(() => {
                    modal.querySelector('.bg-white').classList.add('scale-100');
                    modal.querySelector('.bg-white').classList.remove('scale-95', 'opacity-0');
                }, 10);
            });
            
            // 关闭模态框的函数
            function closeModal() {
                modal.querySelector('.bg-white').classList.remove('scale-100');
                modal.querySelector('.bg-white').classList.add('scale-95', 'opacity-0');
                setTimeout(() => {
                    modal.classList.add('hidden');
                }, 200);
            }
            
            // 关闭模态框
            closeBtn.addEventListener('click', closeModal);
            cancelBtn.addEventListener('click', closeModal);
            
            // 点击模态框外部关闭
            modal.addEventListener('click', function(e) {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                // 收集表单数据
                const toolSelect = form.querySelector('select');
                const borrower = form.querySelector('input[type="text"]').value;
                const borrowDate = form.querySelector('input[type="date"]').value;
                const returnDate = form.querySelectorAll('input[type="date"]')[1].value;
                
                if (!toolSelect.value || !borrower || !borrowDate || !returnDate) {
                    alert('请填写完整的借用信息');
                    return;
                }
                
                const toolName = toolSelect.options[toolSelect.selectedIndex].text;
                
                // 模拟添加借用记录
                alert(`成功添加借用记录：${toolName} 借给 ${borrower}`);
                closeModal();
                
                // 重置表单
                form.reset();
            });
        }
    </script>
</body>
</html>